<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		/*摄像头方向控制*/
		.change_camera_direction {
			text-align: center;
			width: 200px;
			height: 200px;
		}

		.change_camera_direction .camera_title {
			color: #000;
			font-size: 15px;
			margin: 0% auto;
		}




		.direction_div img {
			width: 100%;
			height: 100%;
		}





		[v-cloak] {
			display: none;
		}

		table img {
			width: 35px;
			height: auto;
		}

		table tr {

			height: 60px;
		}

		.dd {
			width: 100%;
			height: 100%;
			background-color: #E8E8E8;
			border-radius: 50%;
		}

		.ta img {
			width: 25px;
			height: auto;
		}

		.Hr {
			height: 1px;
			width: 96%;
			background-color: #D8D8D8;
			margin-left: 2%;
		}
	</style>
</head>

<body>

	<div id="video" v-cloak style="width: 100%">
		<div
			style="width: 100%;position:absolute;top:290px;;background-color: #FFFFFF;height: 60px;z-index: 999;float: left">
			<table style="width: 100%">
				<tr v-show="deviceType!='CS-C5C-3B1WFR'">
					<td style="width: 33%" align="center"><img src="../../image/video/plus-circle.png"
							@click="start(8)">&nbsp;&nbsp;
					<td style="width: 33%" align="center"><img src="../../image/video/minus-circle.png" @click="start(9)"></td>
					<td style="width: 33%" align="center"><img src="../../image/video/camera.png" @click="capture()"></td>
				</tr>
			</table>
		</div>
		<div style="width: 100%;height: 350px" id="iframvideo">
			<!--		<video style="width: 100%;height:100%;object-fit:fill"  id="playVideos"   >-->
			<!--			<source src="" type="video/mp4">-->
			<!--		</video>-->
		</div>
		<div class="change_camera_direction" v-show="deviceType!='CS-C5C-3B1WFR'" style="width: 100%;z-index: 20">
			<table style="width: 100%">
				<tr style="height: 5px">
					<td colspan="3">
						<hr class="Hr" />
					</td>
				</tr>
				<tr style="height: 30px">
					<td colspan="3" style="font-size: 18px;font-weight: bold">云台控制</td>
				</tr>
				<tr style="height: 60px">
					<td style="width: 30%"></td>
					<td></td>
					<td style="width: 30%"> </td>
				</tr>
				<tr>
					<td></td>
					<td>
						<div class="dd">
							<table style="width: 200px;height: 200px" class="ta">

								<tr>
									<td></td>
									<td><img @click="start(0)" src="../../image/video/caret-up.png" /></td>
									<td></td>
								</tr>
								<tr>

									<td><img @click="start(2)" src="../../image/video/caret-left.png" /></td>
									<td></td>
									<td><img @click="start(3)" src="../../image/video/caret-right.png" /></td>
								</tr>
								<tr>
									<td></td>
									<td><img @click="start(1)" src="../../image/video/caret-down.png" /></td>
									<td></td>
								</tr>

							</table>
						</div>
					</td>
					<td></td>
				</tr>
				<tr style="height: 50px">
					<td colspan="3"></td>
				</tr>
				<!--				<tr>-->
				<!--					<td><img src="../../image/video/plus-circle.png" @click="start(8)">&nbsp;&nbsp;-->
				<!--					<td ><img src="../../image/video/minus-circle.png" @click="start(9)"></td>-->
				<!--					<td ><img src="../../image/video/camera.png" @click="capture()"></td>-->
				<!--&lt;!&ndash;					<td><img src="../../image/video/poweroff.png" @click="stop()"></td>&ndash;&gt;-->
				<!--				</tr>-->

			</table>

		</div>
	</div>
</body>
<script src="../../script/ezuikit.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
	apiready = function () {
		var deviceSerial = api.pageParam.deviceSerial;
		var deviceType = api.pageParam.deviceType;
		var chon = api.pageParam.chon;
		var data = {
			accessToken: $api.getStorage('videoaccessToken').data.accessToken,
			deviceSerial: deviceSerial,
			channelNo: "1",
		};
		var cupdataobj = {
			accessToken: $api.getStorage('videoaccessToken').data.accessToken,
			deviceSerial: deviceSerial,
			channelNo: "1",
		};

		var interval;
		var app = new Vue({
			el: '#video',
			data: {
				url: {},
				deviceType: deviceType,
				chon:chon
			},
			created: function () {

				// api.ajax({
				// 	url: 'https://open.ys7.com/api/lapp/live/address/limited',
				// 	method: 'post',
				// 	data: {
				// 		values: {
				// 			"accessToken": $api.getStorage('videoaccessToken').data.accessToken,
				// 			"deviceSerial": deviceSerial,
				// 		}
				// 	}
				// }, function (ret, err) {
				// 	//alert(JSON.stringify(ret))
				// 	app.url = ret.data;
				// 	app.playVideo(app.url);
				// });
				var accessToken = $api.getStorage('videoaccessToken').data.accessToken
				var src = "https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/" + deviceSerial + "/" +
				chon + ".live&autoplay=1&audio=1&accessToken=" + accessToken
				var html = "<iframe id='acc' src=" + src +
					" style=\"width: 100%;height:350px;object-fit:fill;z-index: -1;\"></iframe>";
				$("#iframvideo").append(html);
			},
			methods: {
				// playVideo: function (url) {
				// 	var vdo = document.getElementById("playVideos")
				// 	vdo.src = url.liveAddress;
				// 	vdo.play();
				// },
				start: function (self) {
					data.speed = '1';
					data.direction = self;
					api.ajax({
						url: 'https://open.ys7.com/api/lapp/device/ptz/start',
						method: 'post',
						data: {
							values: data
						}
					}, function (ret, err) {
						console.log(JSON.stringify(ret))
						if (ret.code == 200) {
							// api.toast({
							// 	msg: ret.msg,
							// 	duration: 2000,
							// 	location: 'bottom'
							// });
							interval = setInterval(function () {
								app.$options.methods.stop();
							}, 600);
						} else {
							api.toast({
								msg: "当前设备不支持云台控制",
								duration: 2000,
								location: 'bottom'
							});
						}
					});
				},
				capture() {
					api.ajax({
						url: 'https://open.ys7.com/api/lapp/device/capture',
						method: 'post',
						data: {
							values: cupdataobj
						}
					}, function (ret, err) {
						if (ret.code == 200) {
							var timestamp = new Date().getTime();
							api.download({
								url: ret.data.picUrl,
								savePath: 'fs://test' + timestamp + '.jpeg',
								report: true,
								cache: true,
								allowResume: true
							}, function (ret, err) {
								if (ret) {
									api.toast({
										msg: '图片已保存到本地'
									})
								}
								api.saveMediaToAlbum({
									path: 'fs://test' + timestamp + '.jpeg'
								}, function (ret, err) {

								});
							});
						};
					});
				},
				stop: function (self) {
					api.ajax({
						url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
						method: 'post',
						data: {
							values: data
						}
					}, function (ret, err) {
						if (ret.code == 200) {
							// api.toast({
							// 	msg: ret.msg,
							// 	duration: 2000,
							// 	location: 'bottom'
							// });
							clearInterval(interval);
						};
					});
				}
			}
		});
	}
</script>

</html>